<template>
	<el-card>
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane label="小程序" name="app">
				<el-form :inline="true" :model="queryData" class="demo-form-inline">
					<el-form-item label="昵称">
						<el-input v-model="queryData.query" placeholder="请输入" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit(1)">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="appData.list" border style="width: 100%">
					<!-- <el-table-column prop="user_id" label="openID" /> -->
					<el-table-column prop="nick_name" label="昵称" />
					<el-table-column prop="user_name" label="姓名" />
					<el-table-column prop="phone_num" label="电话" />
					<el-table-column prop="share_id" label="分享人ID" />
					<el-table-column prop="create_time" label="创建时间" />
					<el-table-column
						prop="address"
						label="操作"
						width="100"
						v-if="userInfo.role >= 1"
					>
						<template #default="scpot">
							<el-button link type="primary" @click="topage(scpot.row)">
								详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="管理系统" name="pc" v-if="userInfo.role > 0">
				<div class="serchBox">
					<el-form :inline="true" :model="queryData" class="demo-form-inline">
						<el-form-item label="姓名">
							<el-input v-model="queryData.query" placeholder="请输入姓名" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit(1)">搜索</el-button>
						</el-form-item>
					</el-form>
					<el-button
						type="primary"
						v-if="userInfo.role >= '1'"
						@click="dialogVisible = true"
					>
						添加用户
					</el-button>
				</div>

				<el-table :data="pcData.list" border style="width: 100%">
					<el-table-column prop="account" label="账号" />
					<el-table-column prop="name" label="姓名" />
					<el-table-column prop="phone" label="电话" />
					<el-table-column prop="email" label="邮箱" />
					<el-table-column prop="role" label="角色">
						<template #default="scpot">
							{{
								scpot.row.role == '2'
									? '超级管理员'
									: scpot.row.role == '1'
									? '管理员'
									: '普通用户'
							}}
						</template>
					</el-table-column>
					<el-table-column prop="forbid" label="是否禁用">
						<template #default="scpot">
							<el-switch
								v-model="scpot.row.forbid"
								:disabled="userInfo.role > scpot.row.role ? false : true"
								@change="forbidChange(scpot.row)"
							/>
						</template>
					</el-table-column>
					<el-table-column prop="adduser" label="添加人" />
					<el-table-column prop="create_time" label="创建时间" />
					<el-table-column prop="" label="操作" width="150">
						<template #default="scpot">
							<el-button
								link
								type="primary"
								@click="isAdminChange(scpot.row)"
								v-if="userInfo.role == '2' && scpot.row.role < '2'"
							>
								{{ scpot.row.role == '0' ? '设为管理员' : '取消管理员' }}
							</el-button>
							<el-button
								link
								type="danger"
								v-if="userInfo.role > scpot.row.role"
								@click="onDeleteUser(scpot.row)"
							>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- <pagination
					:current="pcQuery.pageNum"
					:total="pcData.total"
					:pageSize="pcQuery.pageSize"
					@paginaClick="onSubmitApp"
				></pagination> -->
			</el-tab-pane>
		</el-tabs>

		<pagination
			:current="queryData.pageNum"
			:total="queryData.total"
			:pageSize="queryData.pageSize"
			@paginaClick="onSubmit"
		></pagination>
		<el-dialog v-model="dialogVisible" title="用户信息" width="600">
			<el-form :model="formInline" label-width="70px" class="demo-form-inline">
				<el-form-item label="账号">
					<el-input v-model="formInline.account" placeholder="请输入账号" />
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="formInline.name" placeholder="请输入姓名" />
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="formInline.phone" placeholder="请输入电话" />
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="formInline.email" placeholder="请输入邮箱" />
				</el-form-item>
				<el-form-item label="角色">
					<el-select
						v-model="formInline.role"
						:disabled="userInfo.role == '2' ? false : true"
						placeholder="请选择用户角色"
					>
						<el-option label="管理员" value="1" />
						<el-option label="普通用户" value="0" />
					</el-select>
				</el-form-item>
				<el-form-item label="是否禁用">
					<el-switch
						v-model="formInline.forbid"
						active-value="1"
						inactive-value="0"
						inline-prompt
						active-text="是"
						inactive-text="否"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="addPcUser">提交</el-button>
				</div>
			</template>
		</el-dialog>
	</el-card>
</template>
<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue';
import {
	getAppUsers,
	getPcUsers,
	addPcUsers,
	pcForbidden,
	pcIsAdmin,
	deleteUser,
} from '@/utils/api';
import { userStores } from '@/stores';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const activeName: any = ref('app');
const dialogVisible = ref(false);
const appData: any = ref({});
const paginationKey = ref(new Date().getTime());
watch(activeName, (val: string) => {
	queryData.query = '';
	// console.log(val);
	if (val == 'app') {
		// 获取小程序用户
		getAppUserList();
	} else {
		// 获取管理系统用户
		getPcUserList();
	}
});

const queryData = reactive({
	query: '',
	pageNum: 1,
	pageSize: 10,
	total: 0,
});
// 小程序

const getAppUserList = () => {
	getAppUsers(queryData).then((res: any) => {
		appData.value = res.data;
		queryData.total = res.data.total;
	});
};
getAppUserList();
const topage = (row: any) => {
	// console.log(row);
	router.push(`/users/appuserstatistics/${row.user_id}`);
};
// 管理系统获取用户列表

// const pcQuery = reactive({
// 	query: '',
// 	pageNum: 1,
// 	pageSize: 2,
// });
const pcData: any = ref({});
const getPcUserList = () => {
	getPcUsers(queryData).then((res: any) => {
		pcData.value = res.data;
		queryData.total = res.data.total;
	});
};
const onSubmit = (val: number) => {
	queryData.pageNum = val;
	if (activeName.value == 'app') {
		getAppUserList();
	} else {
		getPcUserList();
	}
};
// const onSubmitPc = (val: number) => {
// 	queryData.pageNum = val;
// 	getPcUserList();
// };
// 管理系统
const stor = userStores();
const userInfo: any = computed(() => {
	return stor.user.userInfo;
});
const formInline: any = reactive({
	account: '',
	phone: '',
	name: '',
	email: '',
	role: '0',
	forbid: '0',
	username: userInfo.value.account,
	userid: userInfo.value.id,
});
// 新增用户;
const addPcUser = () => {
	addPcUsers(formInline).then((res: any) => {
		ElMessage.success('添加成功');
		dialogVisible.value = false;
		getPcUserList();
	});
};
// 设置是否禁止登录
const forbidChange = (row: any) => {
	pcForbidden(row.id).then((res: any) => {
		ElMessage.success('设置成功');
	});
};
// 设置管理员
const isAdminChange = (row: any) => {
	pcIsAdmin(row.id).then((res: any) => {
		ElMessage.success('设置成功');
		if (row.role == '0') {
			row.role = '1';
		} else {
			row.role = '0';
		}
	});
};
// 删除用户
const onDeleteUser = (row: any) => {
	ElMessageBox.alert(`确定要删除用户${row.name}吗?`, '提示', {
		confirmButtonText: '确定',
		callback: (action: Action) => {
			console.log(action);
			if (action == 'confirm') {
				deleteUser(row.id).then((res: any) => {
					ElMessage.success('删除成功');
					getPcUserList();
				});
			}
		},
	});
};
// request.post('/api/manday/pc/addpcuser', formInline).then((res: any) => {
// 	console.log(res);
// });
</script>
<style scoped>
.serchBox {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
</style>
